vue的路由和多级菜单的联动及布局,结合element组件的el

2024-06-19 09:22| 来源: 网络整理| 查看: 265

1.话不多说,先上github整体demo代码链接: git整体demo代码

2.效果图:

效果图

3.说明:此demo并未做路由权限控制,只是vue-router结合element组件库的Layout 布局和NavMenu 导航菜单实现基础后台系统的单级和多级菜单的联动.

4.主要代码文件说明:

5.主要文件代码展示(重点部分均有注释):

1. 路由(router-index.js):

import Vue from "vue"; import VueRouter from "vue-router"; import layOut from '../views/layOut/layOut.vue'; //一二级菜单容器 import thirdLay from '../views/layOut/thirdLay.vue'; //三级菜单容器 Vue.use(VueRouter); /** * hidden: 控制(判断)该路由菜单的显隐(需要不显示的路由配置该项为true即可) * meta.title: 菜单名称 * meta.icon: 菜单图标 * path: 路由路径(最后一层不需加/) * redirect: 重定向 */ const routes = [ { path: "/", redirect: 'home', //重定向到首页 hidden: true }, { path: '', name: '', component: layOut, children: [{ path: 'home', name: 'home', meta: { title: '首页', icon: 'el-icon-info' }, component: () => import('@/views/Home.vue'), }] }, { path: '/one', name: 'one', meta: { title: "一级单个", icon: "el-icon-goods", }, component: layOut, children: [{ path: 'oone', name: 'oone', meta: { title: '一单', icon: 'el-icon-info' }, component: () => import('@/views/components/oneOne/oneOne.vue') }] }, { path: '/two', name: 'test', meta: { title: "二级下单个", icon: "el-icon-goods", }, component: layOut, children: [{ path: 'tone', name: 'tone', meta: { title: '二下单', icon: 'el-icon-info' }, component: () => import('@/views/components/twoOne/twoOne.vue') }, { path: 'tone2', name: 'tone2', meta: { title: '二下单2', icon: 'el-icon-info' }, hidden: true, //可用于多级菜单时只有一个下级菜单的显隐 component: () => import('@/views/components/twoOne/twoOne.vue'), }] }, { path: '/twomore', name: 'twomore', meta: { title: "二级下多个", icon: "el-icon-goods", }, component: layOut, children: [{ path: 'twomore1', name: 'twomore1', meta: { title: '二下多1', icon: 'el-icon-info' }, component: () => import('@/views/components/twomore/twomore1.vue') }, { path: 'twomore2', name: 'twomore2', meta: { title: '二下多2', icon: 'el-icon-info' }, // hidden: true, //可用于二级菜单时只有一个下级菜单的显隐 component: () => import('@/views/components/twomore/twomore2.vue'), }] }, { path: "/threemore", name: "threemore", component: layOut, meta: { title: "三下级多个", icon: "el-icon-success", }, children: [ { path: "/threemore1", name: "threemore1", meta: { title: "三一", icon: "el-icon-goods", }, component: thirdLay, children: [{ path: "threemore11", name: "threemore11", meta: { title: "三一一", icon: "el-icon-mobile-phone", }, component: () => import('@/views/components/threemore/threemore11.vue'), }, { path: "threemore12", name: "threemore12", meta: { title: "三一二", icon: "el-icon-service", }, component: () => import('@/views/components/threemore/threemore12.vue'), } ] }, { path: "/threemore2", name: "threemore2", meta: { title: "三二", icon: "el-icon-upload", }, component: thirdLay, children: [{ path: "threemore21", name: "threemore21", meta: { title: "三二一", icon: "el-icon-mobile-phone", }, component: () => import('@/views/components/threemore/threemore21.vue'), }, { path: "threemore22", name: "threemore22", meta: { title: "三二二", icon: "el-icon-mobile-phone", }, hidden: true, //可用于二级菜单时只有一个下级菜单的显隐 component: () => import('@/views/components/threemore/threemore22.vue'), } ] }, { path: "threemore3", name: "threemore3", meta: { title: "三三", icon: "el-icon-upload", }, component: () => import('@/views/components/threemore/threemore3.vue'), }, ] } ]; const router = new VueRouter({ routes }); export default router;

2. 页面整体布局(layOut.vue):

import headTop from "@/views/layOut/pages/headTop.vue"; import asileLeft from "@/views/layOut/pages/asileLeft.vue"; import mainCon from "@/views/layOut/pages/mainCon.vue"; export default { name: "layOut", components: { headTop, asileLeft, mainCon, }, }; /deep/ .el-header, /deep/ .el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px; } /deep/ .el-aside { background-color: #d3dce6; color: #333; text-align: left; line-height: 200px; width: 230px !important; } /deep/ .el-main { background-color: #e9eef3; color: #333; text-align: center; padding: 0 !important; line-height: calc(100vh - 116px); } body > .el-container { margin-bottom: 40px; } /deep/ .el-container:nth-child(5) .el-aside, /deep/ .el-container:nth-child(6) .el-aside { line-height: 260px; } /deep/ .el-container:nth-child(7) .el-aside { line-height: 320px; }

3. 侧边菜单组件(asileLeft.vue):

import sideMeuns from './sideMeuns'; export default { name: "asileLeft", data(){ return { menuList: [] } }, components: { sideMeuns }, methods:{ }, created(){ console.log('1',this.$route.path); this.menuList = this.$router.options.routes } };

4.路由菜单布局逻辑(sideMeuns.vue):

{{ item.children[0].meta.title }} {{ item.meta.title }} {{ itemChild.meta.title }} export default { name: "sideMeuns", props: { menuList: { type: Array, default: () => [], }, }, data() { return { meuns: "", }; }, mounted() { this.meuns = this.menuList; console.log(this.meuns); }, };

6.友情提醒:拉取项目后别忘记先npm install 后安装依赖再执行 npm run serve运行项目哦.

【本文地址】

公司简介

联系我们